<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {Decrypt} from "@/utils/crypto"
import {Back, Delete, InfoFilled, WarnTriangleFilled} from "@element-plus/icons-vue";
import type {Face, SampleInfo} from "@/types";
import api from "@/api";
import {ElMessage} from "element-plus";


let route = useRoute()
let router = useRouter()

const namespace = ref<string>(<string>route.params.namespace)
const collectionName = ref<string>(<string>route.params.collectionName)
const sampleId = ref<string>(<string>route.params.sampleId)
const data = ref<string>(<string>route.params.data)


let a: Array<any> = JSON.parse(Decrypt(data.value))

let faceDataList = reactive([]) //这里是从后端获取的所有数据
let total = ref(0)  //总数据条数
let currentpage = ref(1) //当前所在页默认是第一页
let pagesize = ref(10)  //每页显示多少行数据 默认设置为10
let pageTicket = reactive([]) //分页后的当前页数据

const deleteSampleFaceData = (row: Face) => {
  api.deleteFaceData(namespace.value, collectionName.value, sampleId.value,row.faceId)
      .then((res) => {
        if (res.data.code === 0) {
          ElMessage.success('删除人脸数据成功')
          router.back()
        }
      }).catch(error => {
    ElMessage.error('删除人脸数据失败')
  })

}

onMounted(() => {
  Object.assign(faceDataList, a)
  total.value = a.length
  getPageInfo()
})


//分页
const getPageInfo = () => {  // 获取当前页的数据信息
  //清空pageTicket中的数据
  pageTicket.length = 0
  // 获取当前页的数据
  for (let i = (currentpage.value - 1) * pagesize.value; i < total.value; i++) {
    //把遍历的数据添加到pageTicket里面
    pageTicket.push(faceDataList[i]);
    //判断是否达到一页的要求
    if (pageTicket.length === pagesize.value) break;
  }
}
const handleSizeChange = (size: number) => {  //分页时修改每页的行数,这里会自动传入一个size
  //修改当前每页的数据行数
  pagesize.value = size;
  //数据重新分页
  getPageInfo();
}
const handleCurrentChange = (pageNumber: number) => { //调整当前的页码
                                                      //修改当前的页码
  currentpage.value = pageNumber;
  //数据重新分页
  getPageInfo()
}

</script>

<template>
  <el-button type="primary" :icon="Back" @click="router.back()">返回</el-button>
  <br><br>
  <el-table border :data="pageTicket" :table-layout="'auto'" style="height: 75vmin">
    <el-table-column type="index" label="NO" width="100" align="center"/>
    <el-table-column prop="faceId" label="人脸Id"  align="center"/>
    <el-table-column prop="faceScore" label="分数"  align="center"/>
    <el-table-column prop="faceData" label="人脸数据" align="center">
      <template #default="scope">
        <el-table :data="scope.row.faceData" border table-layout="auto">
          <el-table-column prop="key" label="字段名称" align="center"/>
          <el-table-column prop="value" label="字段值" align="center"/>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-tooltip content="删除样本" placement="top">
          <el-popconfirm
              width="220"
              confirm-button-text="确认"
              cancel-button-text="取消"
              :icon="WarnTriangleFilled"
              title="您确定要删除此样本吗？"
              @confirm="deleteSampleFaceData(scope.row)"
          >
            <template #reference>
              <el-button type="danger" :icon="Delete"/>
            </template>
          </el-popconfirm>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
  <el-row style="text-align: right">
    <el-col>
      <el-pagination
          style="position: absolute; right:10px;margin: 10px"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentpage"
          :page-sizes="[5, 10,50,100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-col>
  </el-row>
</template>

<style scoped>
</style>